<template>
  <div align="center">
    <div
      flex="~"
      justify="center"
      items="center"
      w="80"
      h="80"
      border="~"
      rounded="md"
    >
      <div w="1/2" h="1/2" bg="dark-500" rounded="full" class="relative">
        <div
          class="w-1 h-1 bg-light-500 rounded-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
        ></div>

        <div
          class="w-1 h-1/5 bg-light-500 rounded-md absolute left-1/2 top-3/10 transform -translate-x-1/2 origin-bottom rotate-30 z-0"
          :style="{
            transform: `rotate(${hours}deg)`,
          }"
        ></div>

        <div
          class="w-1 h-1/4 bg-light-500 rounded-md absolute left-1/2 top-1/4 transform -translate-x-1/2 origin-bottom rotate-50 z-5"
          :style="{
            transform: `rotate(${minutes}deg)`,
          }"
        ></div>

        <div
          class="w-1 h-1/3 bg-light-500 rounded-md absolute left-1/2 top-1/6 transform -translate-x-1/2 origin-bottom z-10"
          :style="{
            transform: `rotate(${seconds}deg)`,
          }"
        ></div>

        <div
          class="w-full h-full border rounded-full flex justify-center items-center"
        >
          <div
            v-for="num in 12"
            :key="num"
            class="absolute h-full pt-1 text-light-500"
            :style="{
              transform: `rotate(${num * 30}deg)`,
            }"
          >
            <div
              :style="{
                transform: `rotate(${num * -30}deg)`,
              }"
            >
              {{ num }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ClockPage',
};
</script>

<script setup lang="ts">
onMounted(() => {
  getDate();
});

const degs = reactive({
  hours: 0,
  minutes: 0,
  seconds: 0,
});

const { hours, minutes, seconds } = toRefs(degs);
function getDate() {
  const date = new Date();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  degs.hours = hours * 30 + minutes * 0.5;
  degs.minutes = minutes * 6;
  // 一圈是360度
  degs.seconds = seconds * 6;
}

let timer;

timer = setInterval(() => {
  getDate();
}, 1000);

onUnmounted(() => {
  timer && window.clearInterval(timer);
});
</script>

<style scoped></style>
